import Icon from '@/components/Icon';
import styles from './index.module.scss';
import React from 'react';
import { useHistory } from 'react-router-dom';
import classNames from 'classnames';

interface NavBarType {
  //借鉴第三方的类型
  onBack?: () => void;
  children?: React.ReactNode;
  right?: React.ReactNode;
  fixed?: boolean;
}
export default function NavBar({ onBack, children, right, fixed }: NavBarType) {
  const history = useHistory();
  return (
    <div className={styles.root}>
      <div className={classNames('main', { fixed })}>
        {/* 后退按钮 */}
        <div className="left">
          <Icon type="iconfanhui" onClick={onBack ? onBack : history.goBack} />
        </div>
        {/* 居中标题 */}
        <div className="title">{children}</div>
        {/* 右侧内容 */}
        <div className="right">{right}</div>
      </div>
    </div>
  );
}
